﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中英文单词配对游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        .container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .column {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .word {
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: #f9f9f9;
        }
        .word.selected {
            background-color: lightblue !important; /* 选中状态 */
        }
        .word.correct {
            background-color: lightgreen;
        }
        .word.incorrect {
            background-color: lightcoral;
        }
        #refresh-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>中英文单词配对游戏</h1>
    <p>点击英文单词，再点击中文翻译完成配对。</p>
    <div class="container">
        <div class="column" id="english-words"></div>
        <div class="column" id="chinese-words"></div>
    </div>
    <button id="refresh-button">刷新游戏</button>
    <p id="result"></p>

    <script>
        // 单词数据（可自由修改或增加）
        const wordPairs = [
            { english: "apple", chinese: "苹果" },
            { english: "pear", chinese: "梨" },
            { english: "banana", chinese: "香蕉" },
            { english: "orange", chinese: "橙子" }
        ];

        const englishWordsContainer = document.getElementById('english-words');
        const chineseWordsContainer = document.getElementById('chinese-words');
        const resultText = document.getElementById('result');
        const refreshButton = document.getElementById('refresh-button');

        let selectedEnglish = null; // 存储当前选中的英文单词

        // 初始化游戏
        function initGame() {
            englishWordsContainer.innerHTML = '';
            chineseWordsContainer.innerHTML = '';

            // 随机打乱英文单词的顺序
            const shuffledEnglish = wordPairs
                .map(pair => pair.english)
                .sort(() => Math.random() - 0.5);

            // 随机打乱中文翻译的顺序
            const shuffledChinese = wordPairs
                .map(pair => pair.chinese)
                .sort(() => Math.random() - 0.5);

            // 生成打乱后的英文单词
            shuffledEnglish.forEach(english => {
                const wordDiv = document.createElement('div');
                wordDiv.className = 'word';
                wordDiv.textContent = english;
                wordDiv.dataset.word = english;
                englishWordsContainer.appendChild(wordDiv);
            });

            // 生成打乱后的中文单词
            shuffledChinese.forEach(chinese => {
                const wordDiv = document.createElement('div');
                wordDiv.className = 'word';
                wordDiv.textContent = chinese;
                wordDiv.dataset.word = chinese;
                chineseWordsContainer.appendChild(wordDiv);
            });

            // 绑定点击事件
            bindClickEvents();
        }

        // 绑定点击事件
        function bindClickEvents() {
            const englishWords = document.querySelectorAll('#english-words .word');
            const chineseWords = document.querySelectorAll('#chinese-words .word');

            // 点击英文单词
            englishWords.forEach(word => {
                word.addEventListener('click', () => {
                    // 清除之前的选择状态
                    englishWords.forEach(w => w.classList.remove('selected'));
                    // 标记当前选中的单词
                    word.classList.add('selected');
                    selectedEnglish = word.dataset.word;
                });
            });

            // 点击中文单词
            chineseWords.forEach(word => {
                word.addEventListener('click', () => {
                    if (!selectedEnglish) {
                        resultText.textContent = '请先点击一个英文单词！';
                        return;
                    }

                    // 检查配对是否正确
                    const correctPair = wordPairs.find(pair => 
                        pair.english === selectedEnglish && 
                        pair.chinese === word.dataset.word
                    );

                    if (correctPair) {
                        word.classList.add('correct');
                        resultText.textContent = '正确！';
                    } else {
                        word.classList.add('incorrect');
                        resultText.textContent = '错误，请重试！';
                    }

                    // 清除选中状态
                    englishWords.forEach(w => w.classList.remove('selected'));
                    selectedEnglish = null;
                });
            });
        }

        // 刷新游戏
        refreshButton.addEventListener('click', () => {
            initGame();
            resultText.textContent = '';
        });

        // 启动游戏
        initGame();
    </script>
</body>
</html>